<!--
author: 何其沆(pooky)
desc: 统计信息
date: 2021-11-18
-->
<template>
  <div class="statistics-top">
    <div class="top-list">
      <div class="price">{{ addComma(String(data?.poAmount || 0)) }}</div>
      <div class="title">{{ description }} PO Amount (RMB)</div>
    </div>
    <div class="top-list">
      <div class="price">{{ addComma(String(data?.saleAmount || 0)) }}</div>
      <div class="title">{{ description }} Sales Revenue (RMB)</div>
    </div>
    <div class="top-list">
      <div class="price">{{ addComma(String(data?.yearSaleAmount || 0)) }}</div>
      <div class="title">{{ currentYear }} Cumulative Revenue (RMB)</div>
    </div>
    <div class="top-list">
      <div class="price">{{ addComma(String(data?.estimateSaleAmount || 0)) }}</div>
      <div class="title">{{ currentYear }} Projected Sales Revenue (RMB)</div>
    </div>
    <div class="top-list">
      <div class="price">{{ addComma(String(data?.planSaleAmount || 0)) }}</div>
      <div class="title">{{ currentYear }} Sales Quota (RMB)</div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { useStore } from 'vuex'
import { addComma } from '@/utils/h_utils'

const store = useStore()

defineProps({
  currentYear: {
    type: Number
  },
  description: {
    type: String
  }
})

const data = ref({})
/**
 * 获取年数据
 * @type {ComputedRef<[]|*>}
 */
const yearData = ref(
  computed(() => {
    return store.state.pm.adminYearData
  })
)
/**
 * 获取季度数据
 * @type {ComputedRef<[]|*>}
 */
const quarterData = ref(
  computed(() => {
    return store.state.pm.adminQuarterData
  })
)
/**
 * 获取月数据
 * @type {ComputedRef<[]|*>}
 */
const monthData = ref(
  computed(() => {
    return store.state.pm.adminMonthData
  })
)
/**
 * 监听数据变化
 */
watch(
  () => [yearData, quarterData, monthData],
  ([yVal, qVal, mVal]) => {
    setTimeout(() => {
      if (yVal.value.length !== 0) {
        data.value = yVal.value.data.sales
      } else if (qVal.value.length !== 0) {
        data.value = qVal.value.data.sales
      } else if (mVal.value.length !== 0) {
        data.value = mVal.value.data.sales
      }
    }, 0)
  },
  {
    deep: true
  }
)
</script>

<style scoped lang="less">
.statistics-top {
  width: 100%;
  height: 60px;
  display: flex;
  .top-list {
    padding: 0 45px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    .price {
      color: @text-black;
      font-size: 20px;
      font-weight: 700;
    }
    .title {
      color: @text-gray;
      font-size: 14px;
    }
  }
}
</style>
